<template>
        <div>
            <h2>类与样式绑定</h2>
            <div :style="{ fontSize: data5 + 'px' }">
                李雷和韩梅梅
            </div>
            <button @click="data5--">变小</button>
            <button @click="data5++">变大</button>
            <h2>原始类型数据：无响应式 仅仅显示M到V</h2>
            {{ data1 }}
            <button @click="data1++">+1</button>

            <h2>原始类型数据：响应式 M到V V到M</h2>
            {{ data2 }}
            <button @click="handleAdd">+1</button>

            <h2>对象类型响应式：响应式 M到V V到M</h2>
            {{ data3 }}
            <button @click="data3.age++">age+1</button>

            <h2>表单输入绑定</h2>
            <input type="text" v-model="data4">
            {{ data4 }}
        </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
//原始类型数据  无响应式
const data1 = 1
//原始类型数据  响应式
const data2 = ref(1)
const handleAdd = () => {
    console.log(data2);
    //  data2++   逻辑层需要加.value来修改数据，视图层则不用
    data2.value++
}
//对象类型数据  响应式
const data3 = reactive({ name: "李雷", age: '18' })
// 表单输入绑定
const data4 = ref(66)

//类与样式绑定
const data5 = ref(19)
</script>

<style>

</style>